import React, { useEffect, useState } from 'react'
import { Table, Tag, Button, Modal, Switch, Popover } from "antd";
import axios from "axios";
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
const { confirm } = Modal;
export default function RoleList() {
    const [roleList, setRoleList] = useState([])
    useEffect(() => {
        axios.get(`http://localhost:5000/roles`).then(res => {
            console.log("res", res);
            setRoleList(res.data)
        }).catch(err => {
            console.log("err", err);
        })
    }, [])
    const switchMethod = (item) => {
        console.log('item', item)
    }
    // 删除一项，打开弹出框
    const removeMethod = (item) => {
        confirm({
            title: '确定删除该项？',
            icon: <ExclamationCircleOutlined />,
            content: '',
            onOk() {
                setRoleList(roleList.filter(data => data.id !== item.id))
                // 数据库更新
                axios.delete(`http://localhost:5000/roles/${item.id}`)
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            render(id) {
                return <strong>{id}</strong>;
            },
        },
        {
            title: "角色名称",
            dataIndex: "roleName",
        },
        {
            title: "操作",
            render(item) {
                return (
                    <div>
                        {/* 删除按钮 */}
                        <Button danger onClick={() => removeMethod(item)} icon={<DeleteOutlined />} shape="circle"></Button>
                        <Popover
                            content={
                                <div style={{ textAlign: "center" }}>
                                    <Switch checked={item.pagepermisson} onChange={() => switchMethod(item)}></Switch>
                                </div>
                            }
                            title="页面配置项"
                            trigger={item.pagepermisson ? "click" : "click"}>
                            {/* <Button icon={<EditOutlined />} type="primary" disabled={!item.pagepermisson} shape="circle"></Button> */}
                            <Button icon={<EditOutlined />} type="primary" shape="circle"></Button>
                        </Popover>
                    </div>
                );
            },
        },
    ];
    return (
        <div>
            <Table dataSource={roleList} pagination={{ pageSize: 5 }} columns={columns} rowKey={item => item.id} />
        </div>
    )
}
